<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/admGame.css"/>
<script type="text/javascript" ></script>
<title>红孩儿第三方交易网</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="js/laypage/laypage.js"></script>
<link rel="stylesheet" type="text/css" href="css/layui.css"> 

<!-- Bootstrap -->
  <link href="bootstrap3/css/bootstrap.min.css" rel="stylesheet"/>
  <script  type="text/javascript" src="bootstrap3/js/bootstrap.min.js"></script>
<link rel="shortcut icon" href="http://www.weather.com.cn/favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="js/vue/vue.js"></script>
<style type="text/css">
*{margin: 0;padding: 0}
body{font-size: 12px;font-family: "宋体","微软雅黑";}
ul,li{list-style: none;}
a:link,a:visited{text-decoration: none;}
.list{width: 210px;}
.list ul li{background-color:#467ca2; border:solid 1px #316a91; border-bottom:0;}
.list ul li a{padding-left: 10px;color: #fff; font-size:12px; display: block; font-weight:bold; height:36px;line-height: 36px;position: relative;
}
.list ul li .inactive{ background:url(images/off.png) no-repeat 184px center;}
.list ul li .inactives{background:url(images/on.png) no-repeat 184px center;} 
.list ul li ul{display: none;}
.list ul li ul li { border-left:0; border-right:0; background-color:#6196bb; border-color:#467ca2;}
.list ul li ul li ul{display: none;}
.list ul li ul li a{ padding-left:20px;}
.list ul li ul li ul li { background-color:#d6e6f1; border-color:#6196bb; }
.list ul li ul li ul li ul li ul li{ background-color:red; border-color:#6196bb; }
.last{ background-color:#d6e6f1; border-color:#6196bb; }
.list ul li ul li ul li a{ color:#316a91; padding-left:30px;}
</style>
<script type="text/javascript">
$(function(){
	var a = 0;
	$(".inactive").click(function(){
		a += 1 ;
	    if(a%2==0){
	    	$("#content").css("display","none");
			$("#gc").css("display","none"); 
	    }else{
	        $("#content").css("display","block");
			$("#gc").css("display","block");
		}
		
	});
})


$(document).ready(function() {
	$('.inactive').click(function(){
		if($(this).siblings('ul').css('display')=='none'){
			$(this).parent('li').siblings('li').removeClass('inactives');
			$(this).addClass('inactives');
			$(this).siblings('ul').slideDown(100).children('li');
			if($(this).parents('li').siblings('li').children('ul').css('display')=='block'){
				$(this).parents('li').siblings('li').children('ul').parent('li').children('a').removeClass('inactives');
				$(this).parents('li').siblings('li').children('ul').slideUp(100);

			}
		}else{
			//控制自身变成+号
			$(this).removeClass('inactives');
			//控制自身菜单下子菜单隐藏
			$(this).siblings('ul').slideUp(100);
			//控制自身子菜单变成+号
			$(this).siblings('ul').children('li').children('ul').parent('li').children('a').addClass('inactives');
			//控制自身菜单下子菜单隐藏
			$(this).siblings('ul').children('li').children('ul').slideUp(100);
			//控制同级菜单只保持一个是展开的（-号显示）
			$(this).siblings('ul').children('li').children('a').removeClass('inactives');
		}
	})
});
</script>
</head>
<body>
<div id="top">
	<div id="admgame">
		<div>
			<a href="#">欢迎来到</a>==<a href="#">傲天第三方</a>==<a href="#">交易网</a>
		</div>
		<hr/>
	<div class="list" id="list">
	<ul class="yiji">
		<li><a href="#">世界游戏</a></li>
		<li><a class="inactive">游戏分类</a>
			
			<ul style="display: none" v-for="gc in gameClass">
				<li><a class="inactive active" v-on:click="getGcId(gc.gcId)">{{gc.gcName}}</a>
					<ul style="display: none" v-for="gm in game">
						<li id="click1" ><a class="inactive active" v-on:click="getGameId(gm.gameId)">{{gm.gameName}}</a>
						</li>
					</ul>
				</li> 
			</ul>
		</li>
		<li><a class="inactive" >新闻管理</a></li>
		<li><a class="inactive" >留言管理</a></li>
		<li><a class="inactive" >订单管理</a></li>
	</ul>
	</div>
	</div>
	<div  id="ct">
		<div id="content" >
			<ul v-for="gz in gameZone">		
				<li>
					<button><a v-on:click="getGc(gz.gzId)">{{gz.gzName}}</a></button>	
				</li>
			</ul>
		</div>
		<div id="gc">
			<ul v-for="gc in goodc">
				<li><button onclick="getGs(this)" id="curr" :value="gc.gcId">{{gc.gcName}}</button></li>
			</ul>
		</div>
	</div>
	<div id="one">
		<div id="three">
			<ul v-for="gs in goods" style="float:left;display:block;padding:5px 20px;margin:0px;">
				<li style="padding:10px;font-size:20px">{{gs.goodsAllClass}}</li>
				<li style="padding:10px;font-size:20px"><img alt="asd" :src="gs.gphoto" style="width: 120px; height: 100px;" v-on:click="queryProductDetails(gs.gid)"></li>
				<li style="padding:10px;font-size:20px">{{gs.gname}}</li>
				<li style="padding:10px;font-size:20px">价格:{{gs.gprice}}</li>	
											
			</ul>
			<div id="di" style="margin:50px 0px 0px 0px;"></div>
		</div>
	</div>
</div>
</body>
 <script type="text/javascript">
	var admGame =new Vue({
		el:"#top",
		data:{
			gameClass:'',//点击出现游戏类别
			game:'',//点击出现游戏名称
			gameZone:'', //点击出现分区
			goodc:'',//点击查询商品分类
			goods:'',//查询商品
		},
		methods:{
			getGcId:function(gcId){
				$.ajax({
					url:'showOneGame',
					type:'post',
					dataType:'json',
					data:{"gcId":gcId},
					async:false,
					success:function(result){
						//alert(gcId);
						//console.log(result);
						admGame.game=result;
					}
				});
			},
			getGameId:function(gameId){
				//alert(gameId);
				$.ajax({
					url:'showGameZone',
					type:'post',
					dataType:'json',
					data:{"gameId":gameId},
					async:false,
					success:function(result){
						//alert(gameId);
						console.log(result);
						admGame.gameZone=result;
						/*  $("#content").html("");
					 	$.each(result,function(ind,ele){
							console.log(ele.gzName);
							 $("#content").append("<button>"+ele.gzName+"</button>&nbsp;"); 
						}) */  
					}
			});
		},
		getGc:function(gzId){
			//alert(gzId);
			$.ajax({
				url:'showGoodsClass',
				type:'post',
				dataType:'json',
				data:{"gzId":gzId},
				async:false,
				success:function(result){
					admGame.goodc=result;
					
				} 
			})
		},
		queryProductDetails:function(gid){
			window.location="Goods.jsp?gid="+gid;
		}
		}
	});
	$.ajax({
		url:'showGameOneClass',
		type:'post',
		async:false,
		success:function(result){
			//alert(result);
			//alert(gcId);
			/* $.each(result,function(index,ele){
				alert(ele.gcId);
			}) */
			admGame.gameClass=result;
			
		}
	});
	
	function showGoods(currentPage,gcid){
		$.ajax({
			url:'showGoods',
			type:'post',
			dataType:'json',
			data:{gcId:gcid,currentPage:currentPage},
			success:function(result){
				
				//alert(gcId+"after");
				admGame.goods=result.gs;
				laypage({
					cont:$("#di"),
					pages:result.pages,
		            curr:currentPage,
		            groups:3,
					skin:'#429842',
					skip:true,
					first:'首页',
					last:'尾页',
					groups:3,
					jump:function(obj,first){
						
						if(!first){
							/* alert("asdsa"); */
							showGoods(obj.curr,gcid);		
		                 }
				}
					
		})
			
			}
		})
	}
	function getGs(evt){
		var gcid=$(evt).val();
		$.ajax({
			url:'showGood',
			type:'post',
			dataType:'json',
			data:{"gcid":gcid},
			success:function(result){
				gcId=result.id;
				console.log(gcId);
				showGoods(1,gcId);
			}
		})
		
	}	
</script> 
</html>